<template lang="html">
  <div class="home">

    <!-- <div class='clearfix'>
      <el-button type="danger" class='pull-right mb10' icon="el-icon-delete" style='margin-right:10px;' @click="tourl('/content/trash')">回收箱</el-button>
    </div> -->

    <div class='searchView'>
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item class='pull-right'>
          <el-button type="primary" @click='dialogVisible = true,resetData()'>添加海报</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class='tableView'>
      <el-tag type="info" class='mb10'>共{{tableData.length}}条记录</el-tag>
      <el-table
        ref="multipleTable"
        :data="tableData"
        v-loading='loading'
        align='center'
        border
        height='500'
        tooltip-effect="dark">

        <el-table-column
        align='center'
        width='240'
        label="预览图">
          <template slot-scope="scope">
            <img :src="scope.row.poster" class='cover'>
          </template>
        </el-table-column>

        <el-table-column
        align='center'
        label="跳转链接">
          <template slot-scope="scope">
            <a :href="scope.row.url" target='_blank'>{{scope.row.url}}</a>
          </template>
        </el-table-column>

        <el-table-column
        align='center'
        prop='createTime'
        label="创建时间">
        </el-table-column>

        <el-table-column
        label=""
        width='220'
        align='center'>
          <template slot-scope="scope">
            <el-button size='mini' type="primary" @click='edit(scope.row)'>编辑</el-button>
            <el-button size='mini' type="danger" @click='delIt(scope.row.id)'>删除</el-button>
          </template>
        </el-table-column>

      </el-table>

<!--       <div class="pageBlock">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          layout="prev, pager, next, jumper, sizes"
          :total="totalData">
        </el-pagination>
      </div> -->
    </div>

    <el-dialog
      title="添加/编辑海报"
      :visible.sync="dialogVisible"
      width="500px">

      <el-form ref="form" label-width="100px">
        <el-form-item label="海报封面">
          <el-upload
            class="avatar-uploader"
            action="/v1/upload/uploadFile"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="form.posterUrl" :src="form.posterUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="链接地址">
          <el-input placeholder='请输入链接地址' v-model='form.posterHref'></el-input>
        </el-form-item>
      </el-form>
      
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitAdd">{{form.id?"修 改":"添 加"}}</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
export default {

  data () {
    return {
      tableData:[],
      loading:false,
      totalData:0,
      pageSize:10,
      searchUserId:null,
      currentPage:1,
      dialogVisible:false,
      imageUrl:'',
      form:{
        posterHref: '',
        posterUrl: '',
        type: 0
      }
    }
  },
  watch:{

  },
  methods:{
    resetData(){
      this.form = {
        posterHref: '',
        posterUrl: '',
        type: 0
      };
    },
    edit(row){
      this.resetData();

      this.form.posterUrl = row.poster;
      this.form.posterHref = row.url;
      this.form.id = row.id;
      this.dialogVisible = true;
    },
    submitAdd(){
      
      let form = tools.cloneObj(this.form);
      if(!form.posterUrl){
        tools.toastWarn('请上传海报图片');
        return
      }

      if(!form.posterHref){
        tools.toastWarn('请输入海报连接');
        return
      }

      tools.ajax({
          url:'/v1/index/addBanner',
          data:form,
          type:'POST'
      })
      .then(res => {

        if(res.code == 200){
          this.dialogVisible = false;
          tools.toastOk('添加成功');
          this.getList(1);
        }
      })
      .catch(e => {
        tools.toastWarn(e.msg || '服务器繁忙请稍后再试')
      })

    },
    handleAvatarSuccess(res, file) {
      if(res.code == 200){
        tools.toastOk('上传成功');
        this.form.posterUrl = res.data;
      }else{
        tools.toastWarn(res.msg)
      }
      // this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isImg = file.type.indexOf('image') >= 0;
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isImg) {
        this.$message.error('请选择图片文件');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB');
      }
      this.imageUrl = URL.createObjectURL(file);
      return isImg && isLt2M;
    },
    delIt(id){
      this.$confirm('是否确认删除？',{center:true})
      .then(res =>{
        
        this.loading = true;
        tools.ajax({
            url:`/v1/index/deleteBanner/${id}`,
            type:'DELETE'
        })
        .then(res => {
          this.loading = false;
          if(res.code == 200){
            tools.toastOk('删除成功');
            this.getList(1);
          }
        })
        .catch(e => {
          this.loading = false;
        })

      }).catch( e=> {})
    },
    create(){
      if(!this.searchUserId){
        tools.toastWarn('请选择用户');
        return
      };

      this.tourl('/content/user/create',{userId:this.searchUserId});
    },
    tourl(url,query){
      tools.router.push({path:url,query:query || {}})
    },
    getList(page){
      if(page){
        this.currentPage = page;
      }

      this.loading = true;
      tools.ajax({
        url:'/v1/index/banner',
        data:{
          page:this.currentPage,
          pageSize:this.pageSize
        },
        type:'GET'
      })
      .then(res => {
        this.loading = false;
        if(res.code == 200){
          this.tableData = res.data.centreBannerList;
          // this.totalData = +res.data.total;
        }
      })
      .catch(e => {
        this.loading = false;
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getList();
    }
  },
  mounted(){
    var _this = this;
    this.getList();
  },
  components:{
  }
}
</script>

<style scoped lang='scss'>
  @import '../../../assets/scss/tool.scss';
  .poster{
  }

  .cover{
    max-width: 200px;
    max-height: 100px;
  }
</style>